<template>
  <div class="sakura-container">
    <div v-for="n in petalCount" :key="n" class="petal">
      <div class="petal-inner"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const petalCount = ref(80) // 增加花瓣数量
</script>

<style scoped lang="scss">
@use "sass:math";

.sakura-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.petal {
  position: absolute;
  width: 15px;
  height: 15px;
  animation: falling var(--fall-duration, 10s) var(--fall-delay, 0s) linear infinite;
  
  .petal-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ffb7c5 0%, #ffc0cb 50%, #ffb7c5 100%);
    border-radius: 56% 44% 47% 53% / 44% 59% 41% 56%;
    box-shadow: inset 0 0 5px rgba(255, 192, 203, 0.5);
    opacity: 0.8;
    
    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, transparent 100%);
      transform: translate(-50%, -50%);
      border-radius: 50%;
    }
  }
  
  @for $i from 1 through 80 {
    &:nth-child(#{$i}) {
      --fall-duration: #{math.random(10) + 5}s;
      --fall-delay: #{math.random(15)}s;
      
      @if $i <= 40 {
        // 第一组花瓣：从右上到左下
        right: #{math.random(20)}vw;
        --fall-type: 1;
      } @else {
        // 第二组花瓣：从右中到中间
        right: #{math.random(40) + 20}vw;
        --fall-type: 2;
      }
      
      top: -#{math.random(50)}vh;
      width: #{math.random(8) + 12}px;
      height: #{math.random(8) + 12}px;
      transform: rotate(#{math.random(360)}deg);
      
      .petal-inner {
        animation: flutter #{math.random(4) + 3}s ease-in-out infinite;
      }
    }
  }
}

@keyframes falling {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  
  25% {
    transform: translateX(calc(-25vw * var(--fall-type))) translateY(25vh) rotate(90deg);
  }
  
  50% {
    transform: translateX(calc(-50vw * var(--fall-type))) translateY(50vh) rotate(180deg);
  }
  
  75% {
    transform: translateX(calc(-75vw * var(--fall-type))) translateY(75vh) rotate(270deg);
  }
  
  100% {
    transform: translateX(calc(-100vw * var(--fall-type))) translateY(120vh) rotate(360deg);
  }
}

@keyframes flutter {
  0%, 100% {
    border-radius: 56% 44% 47% 53% / 44% 59% 41% 56%;
  }
  
  25% {
    border-radius: 44% 56% 53% 47% / 59% 44% 56% 41%;
  }
  
  50% {
    border-radius: 47% 53% 44% 56% / 41% 56% 44% 59%;
  }
  
  75% {
    border-radius: 53% 47% 56% 44% / 56% 41% 59% 44%;
  }
}
</style>

    border-radius: 47% 53% 44% 56% / 41% 56% 44% 59%;